<div class="dropdown">  
  <% default_sort_by = profile_subject_is_current? ? "updated_at" : "popularity"%>
  <% icon = profile_subject_is_current? ? "pencil" : "dashboard"%>
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
    <i class="fa fa-<%=icon%>"></i> 
    <%=t('order_by.' + default_sort_by)%>
    <i class="fa fa-angle-down"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dLabel">
    <li>
      <a href="#" onclick="events_dropdown_select('popularity');" class="sort_by_selected" sort-by-key='popularity'> 
        <i class="fa fa-dashboard"></i>
        <%=t('order_by.popularity')%>
      </a>
    </li>
    <li>
      <a href="#" onclick="events_dropdown_select('updated_at');" sort-by-key='updated_at'>
        <i class="fa fa-pencil"></i>
        <%=t('order_by.updated_at')%>
      </a>
    </li>
    <li>
      <a href="#" onclick="events_dropdown_select('created_at');" sort-by-key='created_at'>
        <i class="fa fa-bolt"></i>
        <%=t('order_by.created_at')%>
      </a>
    </li>
    <li>
      <a href="#" onclick="events_dropdown_select('visits');" sort-by-key='visits'>
        <i class="fa fa-eye"></i> 
        <%=t('order_by.visits')%>
      </a>
    </li>
    <li>
      <a href="#" onclick="events_dropdown_select('favorites');" sort-by-key='favorites'>
        <i class="fa fa-star"></i> 
        <%=t('order_by.favorites')%>
      </a>
    </li>
  </ul>
</div>

<%= content_for :javascript do %>
 
  var param = "<%=params[:sort_by]%>";

  if(param && param!=""){
    var value = $("#order_by_selector_events .dropdown-menu [sort-by-key="+param+"]").html();
    $("#dropdownMenuOrdByevents").html(value + '<i class="fa fa-angle-down"></i>'); 
  }
  
<%end%>

<script>
var events_dropdown_select = function(option) {
  $("#events_tab_ready").html("");
  $('.loader_pagination').show();
  $.ajax({
      type : "GET",
      url : "<%= user_url(profile_subject) %>/events?sort_by=" + option,
      success : function(html) {
        $("#order_by_selector_events").attr("li_selected", option);     
        var value = $("#order_by_selector_events .dropdown-menu [sort-by-key="+option+"]").html();
        $("#dropdownMenuOrdByevents").html(value + '<i class="fa fa-angle-down"></i>');
        $('.loader_pagination').hide();      
        $("#events_tab_ready").replaceWith(html);
        re_apply_pageless("events");
      },
      error: function(){
        //console.log("error loading events");
     }
    });
}

</script>